<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导入样式表 -->
  <link rel="stylesheet" href="./assets/news.css" />
</head>

<body>
  <!-- 新闻列表 -->
  <div id="news-list">
  </div>

  <script src="./lib/axios.js"></script>
  <script>
    const newsList = document.querySelector('#news-list');
    // 封装数据
    function renderData() {
      axios.get('http://ajax-api.itheima.net/api/news')
        .then(({ data: res }) => {
          const { data } = res
        newsList.innerHTML =   data.map(item => {
            return `
            <div class="news-item">
              <img
                class="thumb"
                src="${item.img}"
                alt=""
              />
              <div class="right-box">
                <h1 class="title">${item.title}</h1>
                <div class="footer">
                  <div>
                    <span>${item.source}</span>&nbsp;&nbsp;
                    <span>${item.time}</span>
                  </div>
                  <span>评论数：${item.cmtcount}</span>
                </div>
              </div>
            </div>`
          })
        })
    }
    renderData()
  </script>
</body>

</html>